<template>
    <el-container style="line-height: 60px; height: 100%;">
        <el-aside style="background-color: #304156; overflow-y: hidden; width:auto;">
            <div class="logo" style="text-align: center;padding-bottom: 0px;padding-top: 0px;">
                <!-- <img src="images/logo.png" width="122.5" alt="" /> -->
                <img src="@/assets/logo.png" alt=""
                     style="width: 45px; height: 45px;vertical-align: middle;margin-right: 3px;"/>
                <span style="vertical-align: middle;">
					<h3 style="color: #ffffff;display: inline-block;line-height: 69px;"
                        v-show="logoTextShow">公益管理系统</h3>
				</span>
            </div>
            <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                     style="min-height: 100%; overflow-y: hidden"
                     :default-openeds="opens"
                     :collapse="isCollapse"
                     background-color="#343744"
                     text-color="#fff"
                     :collapse-transition="false"
                     active-text-color="#ffd04b"
                     :default-active="$route.path"
                     router>
                <el-menu-item index="/home/usermannage">
                    <i class="el-icon-user"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="/home/activity">
                    <i class="el-icon-ali-huodong_huodongguanli"></i>
                    <span slot="title">活动管理</span>
                </el-menu-item>
                <el-menu-item index="/home/share">
                    <i class="el-icon-ali-kongjian"></i>
                    <span slot="title">分享空间</span>
                </el-menu-item>
                <el-menu-item index="/home/second">
                    <i class="el-icon-ali-ershouwupin"></i>
                    <span slot="title">二手物品</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title" style="margin-left: 20px;">
                        <i class="el-icon-ali-pinglunguanli"></i>
                        <span slot="title">评论专区</span>
                    </template>
                    <el-menu-item index="/home/comment">
                        <i class="el-icon-ali-pinglun"></i>
                        <span slot="title">评论管理</span>
                    </el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title" style="margin-left: 20px;">
                        <i class="el-icon-ali-shouye"></i>
                        <span slot="title">咨询记录</span>
                    </template>
                    <el-menu-item index="/home/consult">
                        <i class="el-icon-ali-airudiantubiaohuizhi-zhuanqu_xinlizixun"></i>
                        <span slot="title">咨询管理</span>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item index="/home/mannager">
                    <i class="el-icon-ali-guanliyuan_jiaoseguanli"></i>
                    <span slot="title">管理员审批</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
    </el-container>
</template>

<script>
    export default {
        name: 'Aside',
        props: {
            isCollapse: Boolean,
            logoTextShow: Boolean
        },
        data() {
            return {
                opens: ['1', '2']
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>
    .el-aside::-webkit-scrollbar {

        display: none;

    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu-item.is-active {
        background-color: #263445 !important;
    }

    .el-menu-item:hover {
        background-color: rgb(38, 52, 69) !important;
    }

    .el-submenu__title:hover {
        background-color: rgb(38, 52, 69) !important;
    }

    /*解决收缩菜单文字不消失问题*/
    .el-menu--collapse span {
        visibility: hidden;
    }

    .el-aside {
        height: 100vh;
    }

    .logo {
        background-color: #343744;
        text-align: center;

        /* height: 100px;
        line-height: 100px;
        padding: 12px 5px; */
        padding: 30px 20px 30px 10px;
    }
</style>
